<template>
    <div :class='chart' :style="{height:'300px',width:'100%'}" id="myEChart"></div>
</template>

<script>
  import * as echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from './mixins/resize'
  import {getTypeCount} from "@/api/recordApi";

  const typeMapping = {
    0: '禁区入侵      ',
    1: '老人跌倒      ',
    2: '交互检测      ',
    3: '情绪异常      ',
    4: '火灾报警      ',
    5: '陌生人检测    '
  };

  export default {
    name: 'PieChart',
    mixins: [resize],
    props: ["recordTime"],
    data() {
      return {
        chart: null,
        record: [],
        time: '本周',
      }
    },
    created() {
      this.initRecord()
    },
    mounted() {
      this.initRecord()
    },
    watch: {
      recordTime: function (newV) {
          this.time = JSON.stringify(newV).replace(/"/g, '')
          this.initRecord()
      }
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initRecord() {
        console.log(1)
        // 后端： stime=0 为本周，stime=1 为今天，stime=2为本月
        if(this.time === '本周' || this.time === ''){
          getTypeCount(0).then(res => {
            this.record = res.result.map(item => ({
              value: item.value,
              name: typeMapping[item.type]
            }));
            this.initChart()
          }).catch(err => {
            console.log(err);
          })
        }
        if(this.time ==='今天'){
          getTypeCount(1).then(res => {
            this.record = res.result.map(item => ({
              value: item.value,
              name: typeMapping[item.type]
            }));
            this.initChart()
          }).catch(err => {
            console.log(err);
          })
        }
        if(this.time ==='本月'){
          getTypeCount(2).then(res => {
            this.record = res.result.map(item => ({
              value: item.value,
              name: typeMapping[item.type]
            }));
            this.initChart()
          }).catch(err => {
            console.log(err);
          })
        }
      },
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        console.log(2)
        this.chart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            left: 'center',
            bottom: '10',
            // data: ['区域入侵', '老人跌倒', '互动', '情绪异常', '火灾报警']
          },
          series: [
            {
              name: '本周异常情况汇总',
              type: 'pie',
              roseType: 'radius',
              radius: [15, 95],
              center: ['50%', '38%'],
              data: this.record,
              // data: JSON.stringify(this.record).replace(/"([^"]+)":/g, '$1:').replace(/"([^"]+)"/g, "'$1'"),
              animationEasing: 'cubicInOut',
              animationDuration: 1600
            }
          ]
        })
      }
    }
  }
</script>
